<!DOCTYPE html>
<html>
	<head>
		${@view('./admin/head.html')}
	</head>
	<body class="${@hook_action('theme', 'admin')}">
		<div id="app">
			<div class="mm_row">
				<div class="mm_col col-12">
					<div class="mm_card">
						<div class="card_head arrow" @click="show_filter = !show_filter">
							<h5>信息管理</h5>
						</div>
						<div class="card_body">
							<div class="mm_form bar_filter">
								<div class="title">
									<h5><span>筛选条件</span></h5>
								</div>
								<div class="mm_list list-3">
									<div class="mm_item">
										<control_input v-model="query.keyword" title="关键词" desc="姓名 / 手机号 / 车牌号"
											@blur="search()" @keypress.enter.native="search()" />
									</div>
									<div class="mm_item">
										<button class="mm_btn btn_primary-x" @click="reset();search()">重置</button>
									</div>
								</div>
							</div>
							<div class="bar_action">
								<h5><span>操作</span></h5>
								<div class="btns">
									<button class="mm_btn btn_primary-x" @click="add_show()">发布</button>
									<button class="mm_btn btn_primary-x" @click="batch_qrcode()">批量生成二维码</button>
									<button class="mm_btn btn_primary plr-2" @click="$layout(0)"
										v-if="layout_style === 1">
										<i class="fa fa-table"></i>
									</button>
									<button class="mm_btn btn_primary plr-2" @click="$layout(1)" v-else>
										<i class="fa fa-list"></i>
									</button>
								</div>
								<div class="btns_left">
									<control_file class="mm_btn"
										accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv,application/json,text/xml"
										:func="import_db" v-if="url_import">
									</control_file>
									<button class="mm_btn" @click="export_db()" v-if="url_export">导出
									</button>
								</div>
							</div>
							<div class="mm_table">
								<table class="table-2" :class="{ list_mode: layout_style }">
									<thead class="table-sm">
										<tr>
											<th class="th_id">
												<control_reverse title="信息ID" v-model="query.orderby" field="display"
													:func="search"></control_reverse>
											</th>
											<th class="th_name">
												<control_reverse title="项目" v-model="query.orderby" field="project_id"
													:list="list_project" :func="search"></control_reverse>
											</th>
											<th class="th_name">
												<control_reverse title="车牌号" v-model="query.orderby" field="car_number"
													:func="search"></control_reverse>
											</th>
											<th>
												<control_reverse title="姓名" v-model="query.orderby" field="name"
													:func="search"></control_reverse>
											</th>
											<th class="th_num">
												<control_reverse title="手机号" v-model="query.orderby" field="phone"
													:func="search"></control_reverse>
											</th>
											<th class="th_num">
												<control_reverse title="邮箱" v-model="query.orderby" field="email"
													:func="search">
												</control_reverse>
											</th>
											<th class="th_time">
												<control_reverse title="微信" v-model="query.orderby" field="wechat"
													:func="search"></control_reverse>
											</th>
											<th class="th_num">
												<control_reverse title="QQ" v-model="query.orderby" field="qq"
													:func="search">
												</control_reverse>
											</th>
											<th>
												<control_reverse title="车主留言" v-model="query.orderby" field="message"
													:func="search"></control_reverse>
											</th>
											<th class="th_time">
												<control_reverse title="创建时间" v-model="query.orderby"
													field="time_create" :func="search"></control_reverse>
											</th>
											<th class="th_handle"><span>操作</span></th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(o, idx) in list" :key="idx" :class="{'active': select == idx}"
											@click="selected(idx)">
											<td class="td_id"><span
													class="label">信息ID：</span><span>{{ o.car_id }}</span></td>
											<td class="td_type">
												<span class="label">项目：</span>
												<span>{{ $to_name(list_project, o.project_id, 'project_id') }}</span>
											</td>
											<td class="td_title">
												<span class="label">车牌号：</span><span>{{ o.car_number }}</span></a>
											</td>
											<td class="th_name">
												<span class="label">姓名：</span><span>{{ o.name }}</span>
											</td>
											<td class="td_num">
												<span class="label">手机号：</span>
												<a target="_blank" :href="'tel:' + o.phone">{{ o.phone }}</a>
											</td>
											<td class="td_name">
												<span class="label">邮箱：</span><span>{{ o.email }}</span>
											</td>
											<td class="td_name">
												<span class="label">微信：</span><span>{{ o.wechat }}</span>
											</td>
											<td class="td_num">
												<span class="label">QQ：</span><span>{{ o.qq }}</span>
											</td>
											<td>
												<span class="label">车主留言：</span>
												<span>{{ o.message }}</span>
											</td>
											<td class="td_time">
												<span class="label">创建时间：</span>
												<span>{{ $to_time(o.time_create, 'yyyy-MM-dd hh:mm:ss') }}</span>
											</td>
											<td>
												<button class="btn_primary"
													@click="edit_show(o)"><span>修改</span></button>
												<button class="btn_error" @click="del_show(o)"><span>删除</span></button>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="card_foot">
							<div class="fl">
								<control_select v-model="query.size" :options="$to_size()" @change="search()" />
							</div>
							<div class="fr">
								<span class="mr">共 {{ count }} 条</span>
								<span>当前</span>
								<input type="number" class="pager_now" v-model.number="page_now" @blur="goTo(page_now)"
									@change="page_change" />
								<span>/{{ page_count }}页</span>
							</div>
							<control_pager display="2" v-model="query.page" :count="count / query.size" :func="goTo"
								:icons="['首页', '上一页', '下一页', '尾页']"></control_pager>
						</div>
					</div>
				</div>
			</div>

			<mm_modal v-model="show" mask="true">
				<div class="mm_card edit_article">
					<div class="card_head">
						<h5>{{ form.article_id ? '修改' : '发布' }}信息</h5>
					</div>
					<div class="card_body pa">
						<div class="mm_form">
							<dl>
								<dt>项目</dt>
								<dd class="input_group">
									<control_input type="text" :options="$to_kv(list_project, 'project_id', 'name')"
										v-model.number="form.project_id" />
								</dd>
							</dl>
							<dl>
								<dt class="required">车牌号</dt>
								<dd>
									<control_input v-model="form.car_number" :minlength="0" :maxlength="32"
										placeholder="例: 粤A20250" :required="true" />
								</dd>
							</dl>
							<dl>
								<dt class="required">姓名</dt>
								<dd>
									<control_input v-model="form.name" :minlength="0" :maxlength="64"
										placeholder="例: 张三" :required="true" />
								</dd>
							</dl>
							<dl>
								<dt class="required">手机号</dt>
								<dd>
									<control_input v-model="form.phone" :minlength="0" :maxlength="64"
										placeholder="例: 15817188866" :required="true" />
								</dd>
							</dl>
							<dl>
								<dt>微信</dt>
								<dd>
									<control_input v-model="form.wechat" :minlength="0" :maxlength="64"
										placeholder="例: zyrwl2021" />
								</dd>
							</dl>
							<dl>
								<dt>QQ</dt>
								<dd>
									<control_input v-model="form.qq" :minlength="0" :maxlength="64"
										placeholder="例: 573242395" />
								</dd>
							</dl>
							<dl>
								<dt>车主留言</dt>
								<dd class="input_title">
									<control_input v-model="form.message" :minlength="0" :maxlength="125"
										placeholder="例: 临时停车，请多关照" />
								</dd>
							</dl>
						</div>
					</div>
					<div class="card_foot">
						<div class="mm_group">
							<button class="btn_default" @click="show = false">取消</button>
							<button class="btn_primary" type="button" @click="submit()">提交</button>
						</div>
					</div>
				</div>
			</mm_modal>
			${@view('./admin/foot.html')}
		</div>

		<script src="/js/require/require.js"></script>
		<script>
			require({
				baseUrl: '/src/',
				paths: {
					babel: '/js/babel.min',
					polyfill: '/js/require/polyfill.min',
					css: '/js/require/css.min',
					text: '/js/require/text.min',
					vue: '/js/require/requirejs-vue',
					jquery: '/js/jquery.min',
					Vue: '/js/vue/vue2',
					mm_sdk: '/js/mm/mm_sdk',
					mm_vue: '/js/vue/mm_vue',
					mm_ui: '/js/mm/mm_ui',
					mm_vue_ui: '/js/vue/mm_vue_ui',
					mixin_page: '/src/mixins/page'
				},
				config: {
					'vue': {
						'css': 'inject',
						'templateVar': '__template__'
					}
				},
				shim: {
					polyfill: {
						deps: ['babel']
					},
					mm_sdk: {
						deps: ['jquery']
					},
					mm_vue: {
						deps: ['mm_sdk']
					},
					mm_ui: {
						deps: ['mm_sdk']
					},
					mm_vue_ui: {
						deps: ['mm_ui']
					}
				}
			});

			require(['Vue', 'mm_vue', 'mm_vue_ui', 'mixin_page'], function(Vue, mm_vue, mm_vue_ui, mixin_page) {
				Vue.use(mm_vue);
				Vue.use(mm_vue_ui);

				var app = new Vue({
					el: '#app',
					mixins: [mixin_page],
					data() {
						return {
							url_export: "~/apis/tool/move_car?method=export",
							url_add: "~/apis/tool/move_car?method=add",
							url_del: "~/apis/tool/move_car?method=del",
							url_set: "~/apis/tool/move_car?method=set",
							url_get_list: "~/apis/tool/move_car?",
							field: "car_id",
							query: {
								page: 1,
								size: 10
							},
							form: {
								car_id: 0,
								wechat: "",
								qq: "",
								message: "",
								available: 1,
								user_id: Number('${user.user_id}')
							},
							list_project: []
						}
					},
					methods: {
						batch_qrcode() {
							this.$get("/api/tool/move_car_config", {}, (json) => {
								if (json.result) {
									var op = json.result.obj;
									var qy = {};
									qy.appid = op.wechat_mini_appid;
									qy.path = "pages/root/move_car";
									qy.search = encodeURIComponent(op.generative_rules.replace(
										/id=[0-9]+/, "id={id}").replace("{project_id}", op
										.project_id));
									var url = $.toUrl(qy, '/wechat/batch_qrcode?');
									this.$nav(url);
								}
							});
						},
						edit_show(o) {
							this.form = Object.assign({}, o);
							this.show = true;
						},
						add_show(o) {
							if (this.form.car_id !== 0) {
								this.form = {
									car_id: 0,
									available: 1,
									user_id: Number('${user.user_id}')
								};
							}
							this.show = true;
						}
					},
					created() {
						this.$getList("list_project", "~/api/sys/project?field=project_id,name");
					}
				});
			});
		</script>
		<style>

		</style>
	</body>
</html>